<template>
  <div style="width: 450px; margin: 0 0 20px 0; display: flex">
    <a-input-search v-model:value="searchs" placeholder="请输入账号名称" enter-button @search="onSearch" />
    <a-button style="margin: 0 0 0 10px" type="primary" :loading="iconLoading" @click="enterIconLoading">
      刷新本页
    </a-button>
    <a-button style="margin: 0 0 0 10px" type="primary" @click="modalVisible = true">
      添加用户
    </a-button>
    <AddUser :modalVisible='modalVisible' @onCanceladduser='onCanceladduser' />
  </div>
  <UserTable :columns='columns' :cerdatalist='cerdatalist' :pagination='pagination' @onCLickDelete='onCLickDelete' @onClickPagination='onClickPagination' :loading='loading' />
</template>

<script lang='ts'>
import { reactive, ref, Ref, toRefs } from "vue";
import { select, search } from "@/api/userApi";
import { $message } from "@/components/AntDesign/message";
import { AxiosResponse } from "axios";
import columns from "@/views/UserManage/method/columns";
import UserTable from "@/components/UserModule/UserTable.vue";
import AddUser from "@/components/UserModule/AddUser.vue";

export default {
  name: " ",
  components: {
    UserTable,
    AddUser,
  },
  setup() {
    const data = reactive({
      search: "",
      iconLoading: false,
      loading: false,
      cerdatalist: [],
      modalVisible: false,
      pagination: {
        total: 0,
        pageSize: 8,
        hideOnSinglePage: true,
        current: 1,
      },
    } as any);

    /* 请求数据 */
    async function request(pageNo = 1) {
      data.loading = true;
      const result = await select({
        pageNo,
        pageSize: data.pagination.pageSize,
      });
      if (result.data.data) {
        result.data.data.forEach((element: any) => {
          element.key = element._id;
          element.Bool = true;
        });
        data.cerdatalist = result.data.data;
        data.pagination.total = result.data.total;
      }
      data.loading = false;
    }
    request();

    /* 搜索事件 */
    const searchs: Ref<string> = ref("");
    async function onSearch() {
      try {
        data.loading = true;
        if (searchs.value) {
          const searchdata: AxiosResponse = await search({
            name: searchs.value,
          });
          searchs.value = "";
          if (searchdata.data.length > 0) {
            searchdata.data[0].key = searchdata.data[0]._id;
            searchdata.data[0].Bool = true;
            data.cerdatalist = searchdata.data;
            data.loading = false;
            return;
          }
          data.cerdatalist = [];
          data.loading = false;
        }
      } catch (error) {
        $message("error", error.data.message);
      }
    }

    /* 刷新事件 */
    function enterIconLoading() {
      data.iconLoading = true;
      request(data.pagination.current);
      //$message("success", "刷新成功");
      data.iconLoading = false;
    }

    /* 删除 */
    function onCLickDelete(index: number) {
      // data.cerdatalist.splice(index, 1);
      enterIconLoading();
    }

    /* 关闭注册窗口事件 */
    function onCanceladduser(val: number) {
      data.modalVisible = false;
      if (val == 1) {
        request(data.pagination.current);
      }
    }

    /* 分页事件 */
    function onClickPagination(current: number) {
      data.pagination.current = current;
      request(current);
    }

    return {
      ...toRefs(data),
      searchs,
      onSearch,
      enterIconLoading,
      onCanceladduser,
      columns,
      onCLickDelete,
      onClickPagination,
    };
  },
};
</script>
